import { Component } from 'react'
import { connect } from 'react-redux'
import {
  View,
  Text,
  Button,
  Navigator,
  Image,
  OpenData,
} from '@tarojs/components'
import { AtList, AtListItem, AtTag } from 'taro-ui'

import * as api from 'src/api'
import Login from 'src/components/Login'
import BindPhoneNumber from 'src/components/BindPhoneNumber'
import { orderState } from 'src/constants'
import { getUserInfo, setUserInfo } from 'src/store/slice/user'
import { getToken } from 'src/utils/app'
import withPage from 'src/utils/withPage'

import './index.scss'

type PageStateProps = {
  userInfo: { [key: string]: any }
}

type PageDispatchProps = {
  getUserInfo: () => any
  setUserInfo: (any) => any
}

type PageOwnProps = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

type IState = { orderData: object; visibleUser: boolean; visiblePhone: boolean }

interface Index {
  props: IProps
  state: IState
}

interface SetVisible {
  visibleUser: boolean
  visiblePhone: boolean
}

const connectRedux: Function = connect

@connectRedux(
  ({ user }) => ({
    userInfo: user.userInfo,
  }),
  (dispatch) => ({
    getUserInfo() {
      dispatch(getUserInfo())
    },
    setUserInfo(user) {
      dispatch(setUserInfo(user))
    },
  })
)
@withPage()
class Index extends Component {
  state: IState = {
    orderData: {},
    visibleUser: false,
    visiblePhone: false,
  }

  componentDidShow() {
    this.getDate()
  }

  getDate = async () => {
    const token = getToken()
    if (!token) {
      this.setState({ visibleUser: true })
    } else {
      const user = (await api.getUserInfo()) as any
      if (user) {
        this.props.setUserInfo(user)
        const orderData: any = await api.getOrderData()
        this.setState({ orderData })
        if (!user.phone) {
          this.setState({ visiblePhone: true })
        }
      } else {
        this.setState({ visibleUser: true })
      }
    }
  }

  bindPhone = (e) => {
    api.userBindPhone(e.detail).then(() => {
      this.props.getUserInfo()
    })
  }

  setVisible = (obj: SetVisible) => {
    this.setState(obj)
  }

  render() {
    const { userInfo } = this.props
    return (
      <View>
        <View className="user-bg"></View>
        <View className="user-head">
          <View className="user">
            <View className="base at-row at-row__justify--between at-row__align--center">
              <View className="avatar">
                {userInfo.avatar ? (
                  <Image className="image" src={userInfo.avatar}></Image>
                ) : (
                  <OpenData
                    type="userAvatarUrl"
                    defaultAvatar={require('src/static/images/avatar.png')}
                  />
                )}
              </View>
              <View className="info flex-col">
                <View className="nickname">
                  {userInfo.nickname ? (
                    <View>{userInfo.nickname}</View>
                  ) : (
                    <OpenData type="userNickName" />
                  )}
                  {userInfo.markName && (
                    <AtTag className="mark" type="primary" size="small" circle>
                      {userInfo.markName}
                    </AtTag>
                  )}
                </View>
                {userInfo.phone ? (
                  <View className="phoneNum">{userInfo.phone}</View>
                ) : (
                  <Button
                    className="bindPhone phoneNum"
                    plain
                    openType="getPhoneNumber"
                    onGetPhoneNumber={this.bindPhone}
                  >
                    <Text>绑定手机号</Text>
                  </Button>
                )}
              </View>
              {/* <Navigator className="vip" url="/pages/user_vip/index">
                {userInfo.markId ? '查看会员卡' : '成为会员'}
              </Navigator> */}
            </View>
            {/* <View className="at-row at-row__justify--around">
              <View className="at-col gain-item">
                <Text className="amount">{userInfo.inviteNum || 0}</Text>
                <View className="type">邀请人数</View>
              </View>
              <View className="at-col gain-item">
                <Text className="amount">
                  {userInfo.nowMoney
                    ? Number(userInfo.brokeragePrice).toFixed(2)
                    : 0}
                </Text>
                <View className="type">奖励金额</View>
              </View>
            </View> */}
          </View>
          <Navigator
            className="card"
            hoverClass="none"
            openType="switchTab"
            url="/pages/order/index"
          >
            <View className="order-hd at-row at-row__justify--between at-row__align--center">
              <View className="left at-col">订单中心</View>
              <View className="right">查看全部</View>
              <View className="at-icon at-icon-chevron-right"></View>
            </View>
            <View className="order-bd at-row at-row__justify--between at-row__align--center">
              {orderState.map((item, index) => {
                const count = this.state.orderData[item.num]
                return (
                  <View className="item" key={index}>
                    <View className="pic">
                      <Image src={item.img}></Image>
                      {count > 0 && <Text className="count">{count}</Text>}
                    </View>
                    <View className="title">{item.title}</View>
                  </View>
                )
              })}
            </View>
          </Navigator>
        </View>
        <View className="card user-menu-list">
          <AtList hasBorder={false}>
            <Navigator url="/pages/user_profile/index">
              <AtListItem
                title="完善会员资料"
                arrow="right"
                thumb={require('src/static/images/wdtg.png')}
              />
            </Navigator>
            <Navigator url="/pages/address_list/index">
              <AtListItem
                title="地址信息"
                arrow="right"
                thumb={require('src/static/images/shdz.png')}
              />
            </Navigator>
            <Button className="list-item" plain open-type="contact">
              <AtListItem
                title="联系客服"
                arrow="right"
                thumb={require('src/static/images/lxkf.png')}
              />
            </Button>
          </AtList>
        </View>
        <Login
          visible={this.state.visibleUser}
          onClose={(phone: boolean) => {
            const obj: any = { visibleUser: false }
            if (!phone) {
              obj.visiblePhone = true
            }
            this.setState(obj)
          }}
          getDate={this.getDate}
        />
        <BindPhoneNumber
          visible={this.state.visiblePhone}
          onClose={() => this.setState({ visiblePhone: false })}
        />
      </View>
    )
  }
}

export default Index
